<!--
 * @Author: Tommy Chen
 * @Date: 2023-03-22
 * @LastEditors: bkkeye
 * @LastEditTime: 2023-04-25
 * @FilePath: \macc.admin.vue\src\views\exportPdf\exportPdf.vue
 * @Description: 
 * 交互报告，兼容海外：
 * - 增加语言参数；
 * - 支持多种logo
-->

<template>
  <div class="pdf-all-content" id="pdfContent">
    <div class="pdf-top">
      <rj-space :size="16">
        <span class="pdf-top-title"
          >『{{ groupMap[groupId].name }}』{{ $t('exportPdf.exportPdf')
          }}<span v-show="isReview && !isIntl">{{
            $t('exportPdf.preview')
          }}</span>
          <span v-show="!isReview && !isIntl">{{
            $t('exportPdf.edit')
          }}</span></span
        >

        <span>{{ $t('exportPdf.updatedTime') }}{{ updatetime }}</span>
      </rj-space>

      <rj-space :size="8">
        <!-- 20230330  tommy 海外部分新增了语言选项 -->
        <template v-if="isReview && isIntl">
          <span>Language: </span>
          <a-select
            :default-value="language"
            style="width: 200px"
            @change="handleChangeLang"
          >
            <a-select-option value="cn"> Chinese(中文) </a-select-option>
            <a-select-option value="en"> English </a-select-option>
            <a-select-option value="es"> Spanish(Español) </a-select-option>
            <a-select-option value="id">
              Indonesian(bahasa Indonesia)
            </a-select-option>
            <a-select-option value="ru"> Russian(русский) </a-select-option>
            <a-select-option value="ar"> Arabic(عربى) </a-select-option>
            <a-select-option value="th"> Thai(ไทย) </a-select-option>
            <a-select-option value="tr"> Turkish(Türk) </a-select-option>
            <a-select-option value="vi">
              Vietnamese(Tiếng Việt)
            </a-select-option>
            <a-select-option value="uk">
              Ukrainian(українська)
            </a-select-option>
          </a-select>
        </template>
        <template v-if="!isReviewing">
          <template v-if="isReview">
            <a @click="setTypeEdit">
              <icon-font type="ic-pdf" class="ic-help-tip" />{{
                $t('exportPdf.editReport')
              }}</a
            >
            <!-- 20230330  tommy 海外不显示金山文档选项 -->
            <div v-if="!isIntl">
              <span>|</span>
              <a @click="kingwordManage">
                <icon-font type="ic-word" class="ic-help-tip" />{{
                  $t('exportPdf.reportManage')
                }}
                <a-tooltip
                  placement="topLeft"
                  :title="$t('exportPdf.tip1')"
                  arrow-point-at-center
                >
                  <icon-font type="ic-help" class="ic-help-tip" />
                </a-tooltip>
              </a>
            </div>
          </template>
          <template v-else>
            <a @click="setTypeReview">
              <icon-font type="ic-pdf" class="ic-help-tip" />{{
                $t('exportPdf.previewReport')
              }}</a
            >
            <!-- 20230330  tommy 海外不显示金山文档选项 -->
            <div v-if="!isIntl">
              <span>|</span>
              <a @click="createKingWord()">
                <icon-font type="ic-word" class="ic-help-tip" />{{
                  $t('exportPdf.transferToEdit')
                }}<a-tooltip
                  placement="topLeft"
                  :title="$t('exportPdf.tip1')"
                  arrow-point-at-center
                >
                  <icon-font type="ic-help" class="ic-help-tip" /> </a-tooltip
              ></a>
            </div>
          </template>
          <span>|</span>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item @click="startDownloadPdf">{{
                $t('exportPdf.downloadPdf')
              }}</a-menu-item>
              <a-menu-item @click="startDownloadWord">{{
                $t('exportPdf.downloadWord')
              }}</a-menu-item>
              <a-menu-item @click="startDownloadTxt" v-if="isShowTxt">{{
                $t('exportPdf.downloadTxt')
              }}</a-menu-item>
            </a-menu>
            <a
              ><icon-font type="ic-download" class="ic-help-tip" />{{
                $t('exportPdf.downloadDeliveryReport')
              }}</a
            >
          </a-dropdown>
        </template>
      </rj-space>
    </div>
    <div class="loading" v-show="isReviewing">
      <a-spin :indicator="indicator" style="margin-bottom: 20px" />
      {{ $t('exportPdf.tip2') }}
    </div>
    <div v-show="isReview" id="pdfpreview" style="flex: 1"></div>
    <div class="pdf-content" v-if="isReviewing || !isReview" id="pdfRContent">
      <div style="flex: 1; margin-right: 195px">
        <template v-if="!isExportPng">
          <div>
            <h1>
              <span v-if="!isEditTitle">{{ title }}</span>
              <span v-else>
                <a-input v-model="editTitle"></a-input>
              </span>
            </h1>
          </div>

          <div id="a01" @mouseover="linkMouseOver('a01')">
            <h2 class="content-title" id="">{{ $t('exportPdf.tip3') }}</h2>
            <div class="seltheme">
              <img
                src="~@assets/images/exportpdf/theme_pdf.png"
                style="width: 102px; height: 145px"
              />
              <icon-font
                type="ic-online"
                style="
                  font-size: 20px;
                  position: absolute;
                  right: 1px;
                  color: #2b6afd;
                "
              />
            </div>
          </div>
          <div id="a02" @mouseover="linkMouseOver('a02')">
            <h2 class="content-title">{{ $t('exportPdf.basicInfo') }}</h2>
            <div>
              <CopyRightLogo ref="copyRightLogoref"></CopyRightLogo>
              <div class="item">
                <label class="item-label">{{
                  $t('exportPdf.deliveryTime')
                }}</label>
                <a-date-picker
                  :default-value="pdfForm.deliveryTime"
                  v-model="pdfForm.deliveryTime"
                  :format="dateFormat"
                  show-time
                  type="date"
                  placeholder="Pick a date"
                  style="width: 350px; display: inline-block"
                  :allowClear="false"
                />
              </div>
              <div class="item" style="display: flex">
                <label class="item-label"
                  >{{ $t('exportPdf.projectProduction') }}
                </label>
                <a-input
                  v-model="pdfForm.introduction"
                  type="textarea"
                  @change="setPdfData"
                  :placeholder="$t('exportPdf.tip4')"
                  style="flex: 1; min-height: 100px"
                />
              </div>
              <div class="tableself item">
                <div>
                  <label class="item-label">{{
                    $t('exportPdf.projectTeam')
                  }}</label>

                  <a-checkbox
                    v-model="pdfForm.containTeamInfo"
                    @change="setPdfData"
                  >
                    {{ $t('exportPdf.tip5') }}
                  </a-checkbox>
                </div>
                <div class="item">
                  <TeamList ref="teamListref"></TeamList>
                </div>
              </div>
            </div>
          </div>
          <div id="a03" @mouseover="linkMouseOver('a03')">
            <VlanDhcp ref="vlandhcpref"></VlanDhcp>
          </div>
          <div
            id="a04"
            class="one_item tableself"
            @mouseover="linkMouseOver('a04')"
          >
            <h2>{{ $t('exportPdf.configureResult') }}</h2>
            <SmartCheckList
              :networkDiagnosisId="networkDiagnosisId"
              :ignoreDiagnoseWarn="pdfForm.ignoreDiagnoseWarn"
              @setIgnoreDiag="setIgnoreDiag"
            ></SmartCheckList>
          </div>
          <div id="a05" @mouseover="linkMouseOver('a05')">
            <h2>{{ $t('exportPdf.deviceList') }}</h2>
            <DeviceAllList
              ref="deviceAllListRef"
              @isShowDownloadTxt="isShowDownloadTxt"
            ></DeviceAllList>
            <DeviceDetailList ref="deviceDetailListtref"></DeviceDetailList>
          </div>
          <h2>{{ $t('exportPdf.topologicalStructure') }}</h2>
        </template>
        <div id="a06" @mouseover="linkMouseOver('a06')">
          <Pdftopo ref="pdftoporef" @getTupoUri="getTupoUri"></Pdftopo>
        </div>
        <div
          v-if="!isExportPng && theme != 'NOC'"
          v-show="!isReview"
          id="a07"
          @mouseover="linkMouseOver('a07')"
        >
          <h2>
            {{ $t('exportPdf.appendix ') }}
            <a-checkbox v-model="pdfForm.containConfig" @change="setPdfData">
              {{ $t('exportPdf.addToPdfAppendix ') }}
            </a-checkbox>
          </h2>
        </div>
      </div>
      <div class="a-links" v-show="!isReviewing && !isReview">
        <a
          v-for="(item, index) in linkList"
          :key="index"
          href="javascript:void(0)"
          @click="linkClick(item.id)"
          :class="currentAnchor == item.id ? 'visited' : ''"
          >{{ index + 1 }}.{{ item.title }}</a
        >
      </div>
    </div>
    <KingwordModal
      ref="kingwordModalRef"
      @createKingWord="createKingWord"
    ></KingwordModal>
  </div>
</template>

<script>
import PDFObject from 'pdfobject';
import { requestHttp, maccApi, requestHttpDownload } from '@utils/index';
import moment from 'moment-timezone';
import { mapState } from 'vuex';
import DeviceAllList from './components/deviceAllList.vue';
import DeviceDetailList from './components/deviceDetailList.vue';
import Pdftopo from './components/pdftopo.vue';
import TeamList from './components/teamList.vue';
import CopyRightLogo from './components/copyrightLogo.vue';
import VlanDhcp from './components/vlandhcp.vue';
import KingwordModal from './components/kingwordModal.vue';
import SmartCheckList from './components/smartCheckList.vue';

export default {
  name: 'exportPdf',
  components: {
    DeviceDetailList,
    DeviceAllList,
    Pdftopo,
    TeamList,
    CopyRightLogo,
    VlanDhcp,
    KingwordModal,
    SmartCheckList,
  },
  data() {
    return {
      ifShow: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      dateFormat: 'YYYY/MM/DD',
      pdfId: '',
      isShowTxt: false,
      isExportPng: true, //首次加载交付报告时 拓扑图需要显示出来
      pdfForm: {
        deliveryTime: null,
        introduction: '', //项目简介
        containConfig: false,
        containTeamInfo: false,
        ignoreDiagnoseWarn: false,
      },
      isReview: false, //预览或者编辑报告
      isReviewing: true, //首次加载交付报告正在生成交付报告
      title: '',
      updatetime: '', //更新时间
      isEditTitle: false,
      networkDiagnosisId: null,
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      targetOffset: undefined,
      currentAnchor: '#a05',
      isTrue: true,
      linkList: [
        {
          title: this.$t('exportPdf.chooseTopic'),
          id: 'a01',
        },
        {
          title: this.$t('exportPdf.basicMessage'),
          id: 'a02',
        },
        {
          title: this.$t('exportPdf.commonConfig'),
          id: 'a03',
        },
        {
          title: this.$t('exportPdf.configResult'),
          id: 'a04',
        },
        {
          title: this.$t('exportPdf.deviceLists'),
          id: 'a05',
        },
        {
          title: this.$t('exportPdf.topologicalStructures'),
          id: 'a06',
        },
        {
          title: this.$t('exportPdf.prefix'),
          id: 'a07',
        },
      ],
      groupName: '',
      isIntl: process.env.VUE_APP_MACC_ENV == 'INTL',
      language: 'cn',
      params: {},
    };
  },
  created() {
    if (this.isIntl) {
      this.language = 'en';
    }
    // if (window.top?.base?.mpm === 'intl_public') {
    //   this.$iframeMsg('MACC3_INTL_GOTO_HASH', {
    //     hash: '/maintenance_project_report_menu',
    //   });
    //   this.$store.commit('IntlTemp/SET_GOTO_MACC3_HASH', true);
    // } else {
    this.ifShow = true;
    this.initView();
    // }
  },
  mounted() {
    let self = this;
    // if (window.top?.base?.mpm === 'intl_public') {
    //   return;
    // }
    this.$nextTick(() => {
      setTimeout(function () {
        self.startReviwing();
      }, 1000);
    });
    this.targetOffset = window.innerHeight / 2;
  },
  destroyed() {
    // if (window.top?.base?.mpm === 'intl_public') {
    //   this.$iframeMsg('MACC3_INTL_LEAVE_HASH');
    //   this.$store.commit('IntlTemp/SET_GOTO_MACC3_HASH', false);
    // }
  },
  methods: {
    async initView() {
      let api = maccApi.DELIVERY_REFRESH;
      let params = {
        groupId: this.groupId,
        list: [],
      };
      requestHttp({
        api: api,
        method: 'POST',
        params: params,
      }).then((ret) => {
        this.getPdfData();
        this.getTotalDevice();
      });
    },
    //刷新所有的内容
    refreshContent() {
      let api = maccApi.DELIVERY_REFRESH;
      let params = {
        groupId: this.groupId,
        list: [],
      };
      requestHttp({
        api: api,
        method: 'POST',
        params: params,
      }).then((ret) => {
        if (ret.code == 0) {
          this.$refs.deviceDetailListtref.initView();
          this.$refs.deviceAllListRef.initView();
          this.$refs.pdftoporef.initView();
          this.$refs.teamListref.initView();
          this.$refs.copyRightLogoref.initView();
          this.$refs.vlanDhcpref.initView();
          this.getPdfData();
          this.getTotalDevice();
        }
      });
    },
    //首次进入页面需要单独设置拓扑图进行显示
    startReviwing() {
      this.isExportPng = true;
      this.setTypeReview();
    },
    //预览交付报告
    setTypeReview() {
      this.isReviewing = true;
      this.reviewType = 'review';
      this.opertType = 'PDF';
      let self = this;
      setTimeout(() => {
        self.$refs.pdftoporef.getPngUri();
      }, 500);
    },
    setTypeEdit() {
      this.reviewType = 'download';
      this.isReview = false;
      this.isExportPng = false;
    },
    //获取已经配置内容
    getPdfData() {
      if (!this.groupId) {
        return;
      }
      let api = `${maccApi.DELIVERY_TITLE_INFO}?group_id=${this.groupId}`;
      requestHttp({
        api: api,
        method: 'GET',
      }).then((ret) => {
        if (ret && ret.code == 0) {
          if (ret.data) {
            this.pdfForm.introduction = ret.data.introduction || '';
            this.title =
              ret.data.title ||
              this.$t('exportPdf.title', {
                name: this.groupMap[this.groupId].name,
              });
            this.editTitle = this.pdfForm.title;
            this.pdfForm.deliveryTime =
              moment
                .tz(ret.data.deliveryTime, this.groupInfo.timezone)
                .format('YYYY-MM-DD') ||
              moment
                .tz(ret.data.updateTime, this.groupInfo.timezone)
                .format('YYYY-MM-DD');
            this.updatetime = moment
              .tz(ret.data.updateTime, this.groupInfo.timezone)
              .format('YYYY-MM-DD HH:mm:ss');
            this.pdfForm.containConfig = ret.data.containConfig;
            this.pdfForm.containTeamInfo = ret.data.containTeamInfo;
            this.pdfForm.ignoreDiagnoseWarn = ret.data.ignoreDiagnoseWarn;
            this.pdfForm.title = ret.data.title;
          }
        }
      });
      this.getDiagonsisState();
    },
    async getDiagonsisState() {
      let api = `${maccApi.DIAGNOSIS_NETWORK_LAST_STATE.replace(
        '{groupId}',
        this.groupId
      )}`;
      let ret = await requestHttp({
        api: api,
        method: 'GET',
      });
      if (ret.code == 0) {
        this.networkDiagnosisId = ret.networkDiagnosisId + '';
      }
    },
    setIgnoreDiag(ignoreDiagnoseWarn) {
      this.pdfForm.ignoreDiagnoseWarn = ignoreDiagnoseWarn;
      this.setPdfData();
    },
    setPdfData(callback) {
      // let title = this.title; // 标题
      let groupId = this.groupId;
      let introduction = this.pdfForm.introduction;
      let param = {};
      param.title = this.pdfForm.title;

      param.introduction = introduction;
      param.deliveryTime = new Date(this.pdfForm.deliveryTime).getTime(); //交付时间
      param.containConfig = this.pdfForm.containConfig; //boolean	导出pdf是否需要包含配置文件信息
      param.containTeamInfo = this.pdfForm.containTeamInfo; //boolean	导出pdf是否需要包含团队信息
      param.ignoreDiagnoseWarn = this.pdfForm.ignoreDiagnoseWarn; //boole 导出pdf是否需要忽略智检的告警项
      param.containTopoDetail = true; //boole 	导出pdf是否包含拓扑下联节点详情
      param.groupId = groupId;
      param.theme = this.theme;

      let api = maccApi.DELIVERY_TITLE_INFO;
      requestHttp({
        api: api,
        method: 'PUT',
        params: param,
      }).then((ret) => {
        if (ret.code == 0) {
          callback && callback(true);
        }
      });
    },
    async getTupoUri(params) {
      let newParam = {
        groupId: this.groupId,
        type: 'png',
        source: 'web',
      };

      if (this.networkDiagnosisId == null) {
        await this.getDiagonsisState();
      }
      newParam.diagnosisId = parseInt(this.networkDiagnosisId);
      this.wordParam = { ...newParam };
      params = { ...params, ...newParam };
      if (params.tupo) {
        this.wordParam.tupo = params.tupo;
        this.wordParam.topoHight = params.topoHight;
        this.wordParam.topoWidth = params.topoWidth;
      }
      if (this.opertType == 'PDF') {
        this.getReviewLastPdf(params);
      } else if (this.opertType == 'IMPORTWORD') {
        this.importKingWord(params);
      } else if (this.opertType == 'DOWNLOADWORD') {
        this.begindownloadWord();
      }
      this.params = params;
      console.log(this.params);
    },

    handleChangeLang(value) {
      this.isReviewing = true;

      this.language = value;
      console.log(this.language);
      this.getReviewLastPdf(this.params);
    },

    //生成交付报告
    getReviewLastPdf(params) {
      params.language = this.language;
      let api = maccApi.DELIVERY_GENERATEPDF;
      console.log(params);
      requestHttp({
        api: api,
        method: 'POST',
        params: params,
      }).then((ret) => {
        if (ret.code == 0) {
          this.pdfId = ret.data;
          this.isExportPng = false;
          if (this.reviewType == 'review') {
            this.isReview = true;
            this.pdfReview(ret.data);
          } else {
            this.isReview = false;
            this.downloadPdf(ret.data);
          }
        } else {
          this.$message.warning(ret.msg);
        }
      });
    },

    //点击下载交付报告
    startDownloadPdf() {
      if (this.isReview && this.pdfId != '') {
        //预览模式下下载使用原来的id
        this.downloadPdf(this.pdfId);
      } else {
        this.opertType = 'PDF';
        this.$refs.pdftoporef.getPngUri();
      }
    },
    /**
     * 获取下载和预览接口的data
     */
    getDownloadPdfData(id, isReview = false) {
      let api = `${maccApi.DELIVERY_EXPORT_PDF}?groupId=${this.groupId}&pdfid=${id}`;
      let fileName =
        this.groupMap[this.groupId].name +
        this.$t('exportPdf.exportPdf') +
        '.pdf';
      let data = {
        api: api,
        fileName: fileName,
        attachment: true, //是否以附件形式下载，默认true
        method: 'GET',
        module: 'default', //api模块，用于区分service 部署的ip,不传默认default，非/service/api/的模块都需要传该参数，巡检--inspection，日志--logbiz，终端管理--pyservice

        contentType: 'application/pdf;charset=UTF-8',
      };
      if (isReview) {
        data.attachment = false;
      }
      return data;
    },
    //直接下载PDF
    downloadPdf(id) {
      let data = this.getDownloadPdfData(id);
      requestHttpDownload(JSON.stringify(data)).then((ret) => {
        //真正下载
        let url = '/webproxy/common/file/download';
        let downloadData = ret.data.downloadData;
        url += '?downloadData=' + downloadData;
        //PDFObject.embed(url, '#pdfpreview');
        window.open(url);
      });
    },
    /**
     * 下载预览的数据
     */
    async pdfReview(id) {
      let self = this;
      let data = this.getDownloadPdfData(id, true);
      data.attachment = false;

      let xhr = this.createXHR();
      xhr.responseType = 'arraybuffer';
      xhr.open('POST', '/webproxy/common/file/download', true);
      xhr.timeout = 20 * 60 * 1000;
      xhr.setRequestHeader('Content-type', 'application/json');
      xhr.onreadystatechange = function () {
        self.isReviewing = false;
        //Call a function when the state changes.
        if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
          // 请求结束后,在此处写处理代码
          let data = xhr.response;
          let blob = new Blob([data], {
            type: 'application/pdf;charset-UTF-8', //word文档为msword,pdf文档为pdf
          });
          let objectURL = URL.createObjectURL(blob);
          let options = {
            pdfOpenParams: {
              pagemode: 'thumbs',
              toolbar: 0,
              navpanes: 0,
              statesbar: 0,
              view: 'FitV',
              page: '1',
              scrollbars: '0',
            },
          };
          PDFObject.embed(objectURL, '#pdfpreview', options);
        } else if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 403) {
          let arrayBuffer = xhr.response;
          let ab2str = function (u, f) {
            let b = new Blob([u]);
            let r = new FileReader();
            r.readAsText(b, 'utf-8');
            r.onload = function () {
              if (f) f.call(null, r.result);
            };
          };
          ab2str(arrayBuffer, function (text) {
            let ret = JSON.parse(text);
            if (ret.code == -1) {
              //sso未登录，跳转
              location.href =
                ret.data.ssoJump + '?back=' + encodeURIComponent(location.href);
            }
          });
        }
      };
      xhr.send(JSON.stringify(data));
    },
    createXHR() {
      let xhr;
      if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xhr = new XMLHttpRequest();
      }
      return xhr;
    },
    //金山文档管理报告
    kingwordManage() {
      this.$refs.kingwordModalRef.showModal();
    },
    //导入到金山文档
    async importKingWord() {
      const data = await requestHttp({
        api: `${maccApi.DELIVERY_ONLINE_WORD_IMPORT}`,
        method: 'POST',
        params: this.wordParam,
      });
      if (data.code == '25') {
        this.$message.info(this.$t('exportPdf.tip6'));
        return;
      }
      //	removeConfLoading();
      if (!data || 0 != data.code) {
        if (data.code == 5 && data.data) {
          this.$iframeMsg('REGISTER_COMTED', {
            eventName: 'DELIVERY_REPORT_WPS_AUTH_FINISH',
            comtedCallback: (comtedRet) => {
              this.kingnewtab && this.kingnewtab.close();
              if (comtedRet.code == 0) {
                this.$message.success(this.$t('supplement.success'));
              } else {
                this.$message.error(this.$t('supplement.fail'));
              }
            },
          });
          this.$message.info(this.$t('exportPdf.tip7'));
          this.kingnewtab = window.open(data.data, '_blank');
        } else {
          this.$message.error(data.msg);
        }
      } else {
        this.wordId = data.data;
        this.$message.success(this.$t('exportPdf.exportSuccess'));
        this.$refs.kingwordModalRef.initView();
        window.open(data.data, '_blank');
      }
    },
    createKingWord(isCreate) {
      // sendConfLoading("正在导入Word文档中，请稍等...");
      if (this.wordParam && isCreate) {
        this.importKingWord();
      } else {
        this.opertType = 'IMPORTWORD';
        this.$refs.pdftoporef.getPngUri();
      }
    },
    //点击下载word按钮
    startDownloadWord() {
      if (this.isReview && this.wordParam) {
        this.begindownloadWord();
      } else {
        this.opertType = 'DOWNLOADWORD';
        this.$refs.pdftoporef.getPngUri();
      }
    },
    //生成下载WORD的id
    async begindownloadWord() {
      this.wordParam.language = this.language;
      const data = await requestHttp({
        api: `${maccApi.DELIVERY_GENERATE_WORD.replace(
          '{groupId}',
          this.groupId
        )}`,
        method: 'POST',
        params: this.wordParam,
      });
      if (data.code == 0) {
        this.downloadWord(data.data);
      }
    },
    //根据生成的ID进行下载
    downloadWord(wordId) {
      let api = `${maccApi.DELIVERY_WORD_EXPORT.replace(
        '{groupId}',
        this.groupId
      ).replace('{wdfid}', wordId)}`;
      let fileName =
        this.groupMap[this.groupId].name +
        moment(new Date().getTime()).format('YYYY-MM-DD') +
        '.docx';
      let data = {
        api: api,
        fileName: fileName,
      };
      requestHttpDownload(data).then((ret) => {
        //真正下载
        let url = '/webproxy/common/file/download';
        let downloadData = ret.data.downloadData;
        url += '?downloadData=' + downloadData;
        window.open(url);
      });
    },
    //是否显示下载TXT压缩包
    isShowDownloadTxt() {
      this.isShowTxt = true;
    },
    /**
     * 获取设备概览
     */
    getTotalDevice() {
      let api = `${maccApi.DELIVERY_DEVICE_OVERVIEW.replace(
        '{groupId}',
        this.groupId
      )}`;
      requestHttp({
        api: api,
        method: 'GET',
      }).then((ret) => {
        debugger;
        ret.list.map((item) => {
          if (
            item.productClass &&
            item.productClass.indexOf('NBR') != -1 &&
            item.productType == this.$t('exportPdf.gateway')
          ) {
            this.isShowTxt = true;
          }
          return item;
        });
      });
    },
    startDownloadTxt() {
      let api = `${maccApi.CONFIGFILE_DOWNLOAD_ZIP.replace(
        '{groupId}',
        this.groupId
      )}`;
      let fileName =
        this.groupMap[this.groupId].name +
        moment(new Date().getTime()).format('YYYY-MM-DD') +
        '.zip';
      let data = {
        api: api,
        fileName: fileName,
      };
      requestHttpDownload(data, 'zip').then((ret) => {
        //真正下载
        let url = '/webproxy/common/file/download';
        let downloadData = ret.data.downloadData;
        url += '?downloadData=' + downloadData;
        window.open(url);
      });
    },
    linkClick(id) {
      this.currentAnchor = id;
      this.setScrollTop();
    },
    //页面滚动 锚点高亮显示
    linkMouseOver(id) {
      this.currentAnchor = id;
    },
    setScrollTop() {
      let top =
        document.querySelector('#' + this.currentAnchor).offsetTop -
        document.querySelector('#a01').offsetTop;
      document.querySelector('#pdfRContent').scroll({
        top: top,
        behavior: 'smooth',
        block: 'nearest',
        inline: 'nearest',
      });
    },
  },
  watch: {
    'pdfForm.deliveryTime': function (val) {
      this.setPdfData();
    },
  },
  computed: {
    ...mapState('Theme', ['theme']),
    ...mapState('Group', ['groupId', 'groupMap', 'groupInfo']),
  },
};
</script>

<style lang="less" scoped>
.loading {
  width: 100%;
  height: 500px;
  background-color: #fff;
  z-index: 100;
  margin-top: 150px;
  margin-bottom: 10000px;
}

h1 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}

h2 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 10px;
}

.pdf-top {
  display: flex;
  justify-content: space-between;
  height: 72px;
  line-height: 72px;
  padding: 0px 16px;
  font-size: 16px;
  border-bottom: 1px solid rgb(169, 169, 169);
}

.pdf-top-title {
  font-weight: bold;
}

.pdf-btn {
  margin: 0 8px;
}

.pdf-page {
  display: flex;
}

.pdf-all-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.pdf-content {
  text-align: left;
  padding: 20px;
  color: #333;
  overflow-y: auto;
  padding-bottom: 50px;
  position: relative;
  .content-title {
    font-size: 16px;
  }
  .seltheme {
    width: 124px;
    height: 150px;
    margin-top: 16px;
    margin-left: 16px;
    border: 1px solid #2b6afd;
    border-radius: 4px;
    position: relative;
    padding: 2px;
  }
  .item {
    margin-top: 16px;
  }
  .item-label {
    width: 100px;
    display: inline-block;
    text-align: right;
  }
}

.a-links {
  right: 35px;
  width: 175px;
  text-align: left;
  position: fixed;
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  border-left: 1px solid #c5c5c5;
  top: 285px;
  a {
    color: rgba(0, 0, 0, 0.65);
    margin-bottom: 4px;
  }
  .visited {
    color: #2b6afd;
    position: relative;
  }
  .visited::after {
    width: 8px;
    height: 8px;
    border: 2px solid #2b6afd;
    position: absolute;
    content: ' ';
    left: -20px;
    line-height: 22px;
    background: #fff;
    border-radius: 50%;
    margin-top: 6px;
  }
}
</style>
